<template>
	<pop-box>
		<uni-popup ref="popup" :mask-click="false">
			<view class="update-container">
				<view class="update-bg"><image src="../../static/theme/default/update.png" mode=""></image></view>
				<view class="update-box">
					<view class="update-title" v-if="!isMustUpdate">有新版本需要更新，请点击升级</view>
					<view class="update-title" v-else>该版本为重大版本，请升级</view>
					<view class="update-content">
						<view class="" v-for="(item,index) in des">
							<view class="">{{index+1}}、{{item}}</view>
						</view>
					</view>
					<progress 
						:percent="percent"
						:show-info="true" 
						border-radius="10" 
						activeColor="red" 
						backgroundColor="#eee"
						stroke-width="8" 
						v-if="isUpdate" />
					<button class="update-btn" type="primary" @click="updateApp" v-else>立即升级</button>
					<view class="update-line"></view>
					<view class="update-cancel">
						<uni-icons type="close" size="30" color="#fff" @click="cancelUpdate"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</pop-box>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import PopBox from '@/components/custom/pop-box/index.vue'
	
	export default {
		name:"update",
		components: {
			PopBox
		},
		data() {
			return {
				des: '',
				isMustUpdate: false,
				isUpdate: false,
				percent: 0,
				update_url: '',
				platform: '',//判断当前系统：ios、android
				iosUrl: '',//ios跳转地址
			};
		},
		mounted() {
			let that = this;
			//#ifdef APP-PLUS
			/** 检测升级 */
			try {
				this.platform = uni.getSystemInfoSync().platform;
				plus.runtime.getProperty(plus.runtime.appid, function(info) {
					_custom.getDataJava({
						apiname: 'getAppLatestVersion',
						apiparam: {
							appname: info.name,
							platform: that.platform
						},
						success(res){
							if(res.length && res[0].AppVersion > info.version) {
								_custom.getDataJava({
									apiname: 'getAppHistoryVersion',
									apiparam: {
										appname: info.name,
										platform: that.platform
									},
									success(data) {
										let lastVersion = data[0];
										that.des = lastVersion.Description.split('|');
									}
								})
								if(that.platform == 'ios'){
									if(!res[0].IosPath) return
									that.iosUrl = res[0].IosPath;
								} else {
									if(!res[0].ApkPath) return
									that.update_url = (plus.os.name == 'Android' ? res[0].ApkPath.replace('homepage/Apk/','http://221.226.178.122:1998/') : '');
									console.log(that.update_url)
								}
								setTimeout(() => {
									that.$refs.popup.open('center')
								})
								if(res[0].ForceUpdate == '1') {
									that.isMustUpdate = true;
									uni.hideTabBar({
										animation: true
									})
								} else {
									that.isMustUpdate = false;
								}
							}
						},
					});
				});
			} catch(e) {
				console.log(e)
			}
			//#endif
		},
		methods: {
			/**
			 * 点击立刻升级
			 */
			updateApp() {
				let that = this;
				if(this.platform == 'android'){
					that.isUpdate = true;
					// 保持屏幕常亮
					uni.setKeepScreenOn({
						keepScreenOn: true
					});
					let downloadTask = uni.downloadFile({
						url: that.update_url,
						success: (res) => {
							if (res.statusCode === 200 ) { 
								// 关闭屏幕常亮
								uni.setKeepScreenOn({
									keepScreenOn: false
								});
								plus.runtime.install(res.tempFilePath,{},() => {
									// plus.runtime.restart();
									plus.runtime.quit();
								},(e) => {
									uni.showModal({
										content: "update error [" + e.code + "]：" + e.message,
										showCancel: false,
									});
								});
							} else {
								uni.showModal({
									content: "地址错误，请联系管理员或稍后更新",
									showCancel: false,
								});
							}
						}
					});
					downloadTask.onProgressUpdate((res) => {
						that.percent = res.progress
					});
				} else {
					uni.navigateTo({
						url: '/pages/push/web?url=' + this.iosUrl,
					});
				}
				
			},
			/**
			 * 点击取消更新
			 */
			cancelUpdate() {
				let that = this;
				if(that.isMustUpdate) {
					plus.runtime.quit();  
				} else {
					setTimeout(() => {
						that.$refs.popup.close()
					})
					uni.showTabBar({
						animation: true
					})
				}
			},
		}
	}
</script>

<style>
	.update-container {
		width: 550rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	
	.update-bg {
		width: 100%;
		height: 150rpx;
		position: relative;
		background: #fff url(../../static/theme/default/bowen.png);
		border-radius: 10rpx 10rpx 0 0;
	}
	
	.update-bg > image {
		width: 170rpx;
		height: 170rpx;
		position: absolute;
		top: -70rpx;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
		border-radius: 10rpx 10rpx 0 0;
	}
	
	.update-box {
		padding: 40rpx;
		box-sizing: border-box;
		position: relative;
	}
	
	.update-title {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		overflow: hidden;
		/*文本不会换行*/
		white-space: nowrap;
		/*当文本溢出包含元素时，以省略号表示超出的文本*/
		text-overflow: ellipsis;
	}
	
	.update-content > view {
		margin: 10rpx 0;
		font-size: 25rpx;
	}
	
	.update-btn {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		margin-top: 40rpx;
	}
	
	.update-line {
		position: absolute;
		width: 3rpx;
		height: 100rpx;
		background-color: #fff;
		left: 50%;
		transform: translateX(-50%);
		bottom: -100rpx;
	}
	
	.update-cancel {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -180rpx;
	}
</style>
